<template>
	<div class="group group-h5">
		<div class="group-box">
			<!-- 选择用户 -->
			<SelectFriend @handleSelectedResult="handleSelectedResult" title="创建群聊" />
		</div>
		<u-popup :show="show" closeable round="10" mode="center" @close="close">
			<div class="name-box">
				<div>群聊名称</div>
				<input minlength="2" maxlength="20" placeholder="请输入群聊名称" border="none" v-model="name"></input>
				<button @tap="submit">确认</button>
			</div>
		</u-popup>
	</div>
</template>
<script lang="ts" setup>
	import TUIChatEngine, {
		TUITranslateService,
		TUIGroupService,
		TUIStore,
		StoreName,
	} from "@tencentcloud/chat-uikit-engine";
	import { TUIGlobal } from "@tencentcloud/universal-api";
	import { isPC } from "../../../utils/env";
	import SelectFriend from "../../TUIContact/select-friend/index.vue";
	import { Toast, TOAST_TYPE } from "../../common/Toast/index";
	import { ref, watchEffect, watch, computed } from "../../../adapter-vue";
	import {checkUserInfo } from "../../../utils/checkLogin";
	import { onHide, onShow,onUnload } from "@dcloudio/uni-app"; 
	//群聊名称
	let name = ref('')
	let show = ref(false)
	let memberListId : any = ref([])
	const close=()=>{
		show.value=false;
		name.value=''
	}
	const submit = () => {
		if(!name.value){
			return Toast({
				message:"请输入群聊名称",
				type:TOAST_TYPE.ERROR
			})
		}
		try {
			let options = {
				name: name.value,
				memberList: memberListId.value,
				inviteOption: TUIChatEngine.TYPES.INVITE_OPTIONS_NEED_PERMISSION,
				type: 'Public',
				avatar: 'https://main-pro.yanchaochao.com/mp-static/96x96.png'
			}
			TUIGroupService.createGroup(options).then(res => {
				Toast({
					message: TUITranslateService.t("TUIGroup.群组创建成功"),
					type: TOAST_TYPE.SUCCESS
				});
				TUIGlobal?.redirectTo({
					url: "/pages/TUIKit/components/TUIGroup/index",
				});
			});
		} catch (err : any) {
			Toast({
				message: err.message,
				type: TOAST_TYPE.ERROR
			});
		}
	}
	const handleSelectedResult = async (memberList : any) => {
		if (!memberList.length) {
			uni.navigateBack()
			return
		}
		memberListId.value = memberList.map((item : any) => {
			return { userID: item.userID };
		})
		show.value=true
		
	}
	onShow(() => {
		console.log(uni.getStorageSync('IMuserInfo'))
		TUIStore.watch(StoreName.CUSTOM, {
			IMuserInfo: (data : any) => {
				if (data) {
					checkUserInfo()
				}
		
			}
		})
		
	})
</script>
<style lang="scss" scoped src="./style/index.scss"></style>
<style lang="scss" scoped>
	.name-box {
		width: 600rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;

		>div {
			font-size: 32rpx;
			font-weight: bold;
			margin-bottom: 40rpx;

		}

		>input {
			background: #ececec;
			width: 100%;
			height: 80rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			border-radius: 10rpx;
		}

		>button {
			background: linear-gradient(90deg, #FA3121 0%, #FC7844 100%) !important;
			color: #fff;
			padding: 0;
			width: 60%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			margin-top: 60rpx;
			font-size: 28rpx;

			&::after {
				content: none;
			}
		}
	}
</style>